<?php extract($data)?>
<script type="text/javascript" src="<?= BASE_URL?>imports/js/jquery-1.6.4.min.js"></script>
<style>
    body{
        padding: 0px;
        margin: 0px;
    }
    *{
        font-family:verdana;
        font-size:8.5pt;
    }
    .banner-wrapper{
        width: <?= $width?>px;
        height: <?= $height?>px;
        padding: 0px;
        margin: 0px;
        position: relative;
    }
    .b1{
        border: solid red 1px;
    }
    .b2{
        border: solid blue 1px;
    }
    .label-title{
        top:0px;
        right:5px;
        position:absolute;
        padding:2px 5px 2px 5px;
        color:#FFFFFF;
        border-right:solid grey 2px;
        border-bottom:solid grey 2px;
        border-left:solid grey 2px;
        background-color:black;
        z-index:10;
        
    }
    .label-title a{
        color:#FFFFFF;
        text-decoration:none;
    }
    .curb{
        border: 1px solid grey;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -o-border-radius: 5px;
            position: relative;
        behavior: url('pie/PIE.php');
    }
    .images{
        width: <?= $width?>px;
        height: <?= $height?>px;
        overflow:hidden;
    }
    .show-50 { -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50; }
</style>
<?php 
$ids = explode(',',$content);// json_decode($content);
$ctr = count($ids);
?>
<div class="banner-wrapper" effect="<?= $effect?>">
    <span class="label-title show-50"></span>
    <?php foreach ($ids as $v):?>
    <?php 
    $arr = explode('_', $v);
    $type = $arr[0];
    $id = $arr[1];
    ?>
    <div index="<?= $v?>" class="bor images">
        <?php if($type=='page'):?>
        
            <div style="position:relative;"><?= $attr[$type][$id]['content']?></div>
            
        <?php else:?>
            <img index="<?= $v?>" class="images"  src="<?= BASE_URL . $attr[$type][$id]['location'] ?>"/>
        <?php endif;?>
        
    </div>
    <?php endforeach?>
</div>

<script>
var array = new Array();  
var attr = <?= json_encode($attr)?>;
$(function(){
    
    $(".banner-wrapper").ready(function(){
        var effect = $(".banner-wrapper").attr('effect');
        var width = <?= $width?>;
        var height = <?= $height?>;
        
        var last = 0;
        var i = 0;
        var z_index = <?= $ctr ?>;
        switch(effect){
            case 'slide':
                $('div', ".banner-wrapper").each(function(){
                    $(this).css('position','absolute');
                    last = i*width;
                    $(this).css('left',last+'px').show();
                    i++;
                });
                animate_slide(last,width);
                break;
            default:
                $('div', ".banner-wrapper").each(function(){
                    $(this).css('position','absolute');
                    $(this).css('z-index',z_index--);
                    var x = $(this).attr('index');
                    array.push(x)
                    last = i*40;
                    i++;
                });
                set_anchor(array[0],200);
                $('div[index="'+array[0]+'"]').fadeIn(2000, function(){
                   animate_fade();
                });
                
                break;
        }
    });
});

function animate_fade(){
    
   $('div[index="'+array[0]+'"]').fadeOut(2000, function(){
       //set_anchor(array[1],200);
       swap();
   });
}
function set_anchor(index,delay){
    /*
    if(index!=0){
        $(".label-title").hide().html('<a href="'+attr[index].href+'" target="blank">'+attr[index].title+'</a>').show(delay);
    }else{
        $(".label-title").html('');
    }*/
    
}
function swap(){
    var size = parseInt(array.length);
    var temp = array[0];
    var x = 0;
    for(var i = 0; i < size; i++){
        x = array[i+1];
        array[i] = x;
    }

    array[size-1] = temp;
    var ctr = size;
    $.each(array,function(i, v){
        $('div[index="'+v+'"]').css('z-index',ctr).show();
        ctr--;
    });
    
    setTimeout('animate_fade()',3000);
}

function animate_slide(last,width){
    $('div', ".banner-wrapper").each(function(){
        
        var left = $(this).css('left');
        left = parseInt(left);
        
        if(left==0){
            var index = $(this).attr('index');
            set_anchor(index,200);
        }
        
        $(this).delay(3000).animate({left:'-='+width+'px'}, 2000,function(){
            left = $(this).css('left');
            left = parseInt(left);
            
            if(left<0){

                $(this).css('left',last+'px');
            }
            if(left == (last-width)){
                animate_slide(last,width);
            }
        });
    });
}
</script>

